import { useState, useEffect, useRef } from 'react';
import { NavBar, Search, Toast } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import AMapLoader from "@amap/amap-jsapi-loader";

export default function Map() {
    const navigate = useNavigate();
    let [jingdu, setJingdu] = useState(''); // 经度
    let [weidu, setWeidu] = useState(''); // 纬度
    const [value, setValue] = useState(''); // 搜索框的值
    const inputRef = useRef(null); // 用于引用输入框DOM元素

    const mapContainerRef = useRef(null); // 用于引用地图容器DOM元素

    useEffect(() => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                // setLatitude(position.coords.latitude);
                // setLongitude(position.coords.longitude);
                console.log(position.coords.latitude, position.coords.longitude)
              },
              (error) => {
                console.error('Error getting geolocation:', error);
              }
            );
          } else {
            console.error('Geolocation is not supported by this browser.');
          }
        window._AMapSecurityConfig = {
            securityJsCode: "213d75dfeafaf11b267bf69d8e"
        };

        // 加载高德地图API以及相关插件
        AMapLoader.load({
            key: "e4d507c7f48b3a106fd384a27b4b19a5",
            version: "2.0",
            plugins: ['AMap.Geolocation', 'AMap.CitySearch',"AMap.ToolBar","AMap.HawkEye"] // 新增AMap.CitySearch插件用于获取城市信息
        })
       .then((AMap) => {
            const map = new AMap.Map(mapContainerRef.current, {
                resizeEnable: true,
                zoom: 12, //初始化地图层级
            });

            const options = {
                'showButton': true,// 显示定位按钮
                'position': 'LB',// 定位按钮的停靠位置
                'offset': [10, 20],// 定位按钮距离停靠位置的偏移量
                'showMarker': true,// 定位成功后在定位到的位置显示点标记
                'needAddress': true,// 是否需要返回地址描述
                'markerOptions': {
                    'offset': new AMap.Pixel(-18, -36),
                    'content': '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
                },// 定位成功后显示的定位标记的样式
                'showCircle': true,// 定位成功后用圆圈表示定位精度范围
                'circleOptions': {
                    'strokeColor': '#0093FF',// 圆圈的颜色
                    'noSelect': true,// 设置圆形是否不可被选中
                    'strokeOpacity': 0.5,// 圆的边界线透明度
                    'strokeWeight': 1,// 圆的边界线宽度
                    'fillColor': '#02B0FF',// 圆的填充颜色
                    'fillOpacity': 0.25// 圆的填充透明度
                }
            };

            const geolocation = new AMap.Geolocation(options);// 创建定位实例
            map.addControl(geolocation);// 将定位实例添加到地图上

            const citySearch = new AMap.CitySearch(); // 创建城市搜索实例

            geolocation.getCurrentPosition((status, result) => {
                if (status === 'complete') {
                    console.log('定位成功', result);
                    const { position } = result;
                    const { lng, lat } = position;
                    console.log(`经度: ${lng}, 纬度: ${lat}`);
                    setJingdu(lng);
                    setWeidu(lat);
                    
                    //获取城市信息
                    citySearch.getLocalCity((status, result) => {
                        if (status === 'complete') {
                            console.log('获取城市信息成功', result);
                            // 在这里可以根据城市信息进行相应的操作
                        } else {
                            console.error('获取城市信息失败', result);
                        }
                    })
                    
                } else {
                    console.error('定位失败', result);
                }
            });
        })
       .catch((e) => {
            console.error('地图加载失败', e);
        });
    }, []);

    return (
        <>
            <NavBar
                title="选择地址"
                leftText="返回"
                onClickLeft={() => navigate('/addmap?jingdu='+jingdu+'&weidu='+weidu)}
            />
            <Search
                ref={inputRef}
                value={value}
                onChange={(val) => setValue(val)}
                placeholder="请输入搜索关键词"
                showAction
                onSearch={(val) => {
                    Toast.success(val);
                    setValue(val);
                }}
                onCancel={() => {
                    Toast.info('取消');
                    setValue('');
                }}
                onClear={() => {
                    Toast.info('清除');
                    setValue('');
                }}
                onClickInput={() => {
                    Toast.info('点击输入区域时触发');
                }}
            />
            <div ref={mapContainerRef} style={{ width: "100vw", height: "100vh" }}></div>
        </>
    );
}